<template>
    <div class="container" :style="`height:${height}`">
        <div class="content">
            <div class="titile">
                <p>
                    <slot name="titile"></slot>
                </p>
            </div>
            <slot name="content"></slot>
            <slot name="footer"></slot>
        </div>
    </div>

</template>
<script setup lang="ts">
defineProps<{
    height?: string
}>()
</script>
<style lang="scss" scoped>
.container {
    // height: 73rem;
    min-width: 28.125rem;
    padding: .625rem;
    background-color: rgba(0, 0, 0, .2);

    .content {
        height: 100%;
        width: 100%;
        border: .1rem solid gray;
        background-color: #fdfdfd;
        padding: 1.15rem 1.5625rem;

        .titile {
            height: 11.0625rem;
            line-height: 11.0625rem;
            text-align: center;
            background: url(../../assets/fgo-logo.png) no-repeat;
            background-size: contain;
            background-position: center;

            p {
                font-size: 2.625rem;
                font-weight: 600;
                background: linear-gradient(to bottom, #322e2e, #1452b7);
                background-size: 100% 65%;
                background-repeat: no-repeat;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }

        }
    }


}
</style>